<template>
    <Modal
        title="取消工单"
        :value="show"
        @on-visible-change="setVisibility">

        <Form :label-width="100" class="padding-right-20" v-if="ticket">

            <FormItem label="工单编号：">
                {{ticket.ticket_sn}}
            </FormItem>

            <FormItem label="房源地址：">
                {{concatLocation(ticket.home_info)}}
            </FormItem>

            <FormItem label="取消原因：">
                <i-input
                    type="textarea"
                    placeholder="必填"
                    v-model="description"></i-input>
            </FormItem>
        </Form>

        <Row slot="footer">
            <Button type="text" @click="setVisibility(false)">取消</Button>
            <Button type="primary" :loading="loading" @click="handleSubmit">确定</Button>
        </Row>
    </Modal>
</template>

<script>
/**
 *  工单 - 取消工单
 */
import util from '@/libs/util'
import { http, api } from '@/libs/http'

export default {
  name: 'merchant-cancel-modal',
  props: {
    show: Boolean,
    ticket: Object
  },
  data () {
    return {
      loading: false,
      description: ''
    }
  },
  watch: {
    show (n) {
      if (n) {
      } else {
        this.description = ''
        setTimeout(() => {
          this.$emit('update:ticket', null)
        }, 500)
      }
    }
  },
  methods: {
    concatLocation: util.concatLocation,
    setVisibility (val) {
      this.$emit('update:show', val)
    },
    handleSubmit () {
      if (!this.description) {
        this.$Message.info('请填写取消原因')
        return
      }
      this.loading = true
      http.request(this, api.ticket_close, [this.ticket.id], { description: this.description }, (res, err) => {
        this.loading = false
        if (err || !res) return
        this.$Message.success('操作成功')
        this.$emit('refresh')
        this.loading = false
        this.setVisibility(false)
      })
    }
  }
}
</script>